<!-- 支出单确认费用 -->
<template>
  <a-modal
    v-model:visible="visible"
    title="费用明细"
    unmount-on-close
    :mask-closable="false"
    class="modal-dialog-wrapper"
    width="65vw"
    @close="close"
  >
    <div class="fee-page">
      <div class="fee-list">
        <div style="margin: 0 20px">
          <div class="fee-tlt">
            <div class="tlt-name">
              <span class="tag-name">{{ costRecord.costType == 1 ? '报销费用' : '支出费用' }}</span>
            </div>
            <div class="tlt-price">应付：{{ unitVal(costRecord.amount, '元') }}</div>
          </div>
          <div style="margin-bottom: 24px">
            <div class="fee-msg">
              <div class="msg">
                <div class="msg-tlt"><span>支出单号：</span>{{ costRecord.code || '-' }}</div>
                <div class="msg-tlt"><span>支出单类型：</span>{{ costRecord.costTypeName || '-' }}</div>
                <div class="msg-tlt"><span>费用产生机构：</span>{{ costRecord.feeOrgName || '-' }}</div>
                <div class="msg-tlt">
                  <span>关联工单号：</span>
                  <template v-if="costRecord.workTypeName || costRecord.workCode">
                    {{ costRecord.workTypeName }} {{ costRecord.workCode }}
                  </template>
                  <template v-else>-</template>
                </div>
                <div class="msg-tlt">
                  <span>关联业务单号：</span>
                  <template v-if="costRecord.businessTypeName || costRecord.businessCode">
                    {{ costRecord.businessTypeName }} {{ costRecord.businessCode }}
                  </template>
                  <template v-else>-</template>
                </div>
                <div class="msg-tlt"><span>申请备注：</span>{{ costRecord.remark || '-' }}</div>
              </div>
              <div class="msg-open" @click="foldChange" v-if="costRecord.feeList && !foldShow">展开 <icon-down /></div>
              <div class="msg-open" @click="foldChange" v-if="costRecord.feeList && foldShow">收起 <icon-up /></div>
            </div>
            <div class="line" v-if="foldShow">
              <div></div>
            </div>

            <template v-if="foldShow">
              <a-divider :margin="0" v-if="!foldShow && costRecord.feeList" />
              <div class="fee-table" v-if="costRecord.feeList">
                <div class="table-items" v-for="(item, index) in costRecord.feeList" :key="index">
                  <div class="item-row">
                    <div class="item-pro">{{ item.itemName }}</div>
                    <div class="item-pro">付款</div>
                    <div class="item-pro">{{ unitVal(item.amount, '元') }}</div>
                    <div class="item-pro">{{ item.occurTime }}</div>
                  </div>
                </div>
              </div>
            </template>
            <div class="amount-all" v-if="foldShow">
              <div class="line">
                <div></div>
              </div>
              <div class="amount">待付：{{ unitVal(costRecord.waitPayAmount, '元') }} </div>
            </div>
          </div>
        </div>
        <div class="all-cost">
          <span>合计</span>
          <div class="cost-num">
            <div>应付：{{ unitVal(Math.abs(costRecord.amount), '元') }}</div>
            <div style="margin-top: 16px">待付：{{ unitVal(Math.abs(costRecord.waitPayAmount), '元') }}</div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup>
  import { ref } from 'vue'
  import { unitVal } from '@/utils'
  import { getOperateCostDetail } from '@/api/finance/turnover'

  // 打开弹窗
  const visible = ref(false)
  const record = ref({})
  const open = (value) => {
    record.value = value
    getDetail(value.businessId)
    visible.value = true
  }
  const close = () => {
    visible.value = false
  }

  // 运营成本
  const costRecord = ref({})
  const getDetail = (id) => {
    getOperateCostDetail({ id }).then((res) => {
      if (res.code == 200) {
        costRecord.value = res.result
      }
    })
  }

  // 展开\收起
  const foldShow = ref(true)
  const foldChange = () => {
    foldShow.value = !foldShow.value
  }

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .fee-list {
    padding-top: 20px;
    border: 1px solid #f2f3f5;
    .fee-tlt {
      width: 100%;
      height: 40px;
      background-color: #f2f3f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tlt-name {
        .tag-name {
          font-weight: 600;
          font-size: 14px;
          margin-left: 20px;
        }
      }
      .tlt-price {
        font-size: 14px;
        color: #1890ff;
        font-weight: 600;
        margin-right: 20px;
      }
    }
    .fee-msg {
      background: #fbfbfc;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 100%;
      padding-top: 20px;
      .msg {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 20px;
        div {
          width: 33.33%;
          margin-bottom: 12px;
        }
        .msg-tlt {
          color: var(--color-neutral-10);
          span {
            color: var(--color-neutral-8);
          }
        }
        .times {
          width: 66.66%;
        }
      }
      .msg-open {
        color: #1890ff;
        font-size: 14px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .line {
      width: 100%;
      background-color: #fbfbfc;
      div {
        width: calc(100% - 40px);
        margin-left: 20px;
        height: 1px;
        background-color: #f2f3f5;
      }
    }
    .amount-all {
      background-color: #fbfbfc;
      .amount {
        width: 100%;
        height: 62px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 20px;
      }
    }
    .fee-table {
      background: #fbfbfc;
      padding: 24px;
      width: 100%;
      .table-items {
        .item-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .item-pro {
            font-weight: 600;
            width: 200px;
            margin-bottom: 12px;
            cursor: pointer;
          }
          .item-pro-twice {
            font-weight: 400;
            margin-left: 14px;
          }
          .open-icon {
            margin-left: 2px;
          }
          .open-icon-close {
            transform: rotate(180deg);
          }
          .item-name {
            width: 30%;
          }
          .item-cost {
            width: 15%;
          }
          .item-amount {
            width: 15%;
            font-weight: 400;
          }
          .item-remark {
            width: 40%;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  .all-cost {
    font-weight: 600;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: #f2f3f5;
    height: 100px;
    .cost-num {
      color: #1890ff;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }
  // 弹窗添加的样式
  .fee-page {
    width: 100%;
    max-height: 70vh;
    position: relative;

    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-modal-body) {
      padding: 10px 80px !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
